<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程风格分栏布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft Yahei", sans-serif;
            background-color: #f5f5f5;
            padding: 10px;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* 顶部横幅（需确保图片路径正确） */
        .banner {
            width: 100%;
            height: 120px;
            background: url("../img/横幅.jpg") center/cover no-repeat;
        }

        /* 导航栏组通用样式 */
        .nav-group {
            display: flex;
        }
        .nav-left {
            flex: 1;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white; /* 左侧文字为白色，与右侧一致 */
            font-size: 18px;
        }
        .nav-right {
            flex: 2;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 50px);
        }
        .nav-item {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border: 1px solid rgba(255,255,255,0.2);
        }

        /* 中间功能模块（签到+特卖汇） */
        .middle-func {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background-color: #fff;
        }
        .func-card {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .func-card img {
            width: 60px;
            height: 60px;
        }
        .func-card .text h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }
        .func-card .text p {
            font-size: 14px;
            color: #666;
        }

        /* 底部功能区 */
        .footer-func {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background-color: #fff;
        }
        .footer-func-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        .footer-func-icon {
            width: 40px;
            height: 40px;
            background: url("../img/特卖汇.png") center/contain no-repeat;
        }
        .footer-func-text {
            font-size: 14px;
        }

        /* 页脚信息 */
        .footer-info {
            text-align: center;
            padding: 10px 0;
            font-size: 12px;
            color: #666;
        }
        .footer-info a {
            color: #666;
            text-decoration: none;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 1. 顶部横幅（背景图需放在 ../img/ 目录下） -->
        <div class="banner"></div>

        <!-- 2. 第一组导航（绿色） -->
        <div class="nav-group" style="background-color: #4CAF50;">
            <div class="nav-left" style="background-color: #4CAF50;">
                <!-- 左侧填充绿色 -->
            </div>
            <div class="nav-right">
                <div class="nav-item">海外酒店</div>
                <div class="nav-item">团购</div>
                <div class="nav-item">特惠酒店</div>
                <div class="nav-item">客栈公寓</div>
            </div>
        </div>

        <!-- 3. 第二组导航（紫色） -->
        <div class="nav-group" style="background-color: #9C27B0;">
            <div class="nav-left" style="background-color: #9C27B0;">
                <!-- 左侧填充紫色 -->
            </div>
            <div class="nav-right">
                <div class="nav-item">海外酒店</div>
                <div class="nav-item">团购</div>
                <div class="nav-item">特惠酒店</div>
                <div class="nav-item">客栈公寓</div>
            </div>
        </div>

        <!-- 4. 第三组导航（蓝色） -->
        <div class="nav-group" style="background-color: #2196F3;">
            <div class="nav-left" style="background-color: #2196F3;">
                <!-- 左侧填充蓝色 -->
            </div>
            <div class="nav-right">
                <div class="nav-item">海外酒店</div>
                <div class="nav-item">团购</div>
                <div class="nav-item">特惠酒店</div>
                <div class="nav-item">客栈公寓</div>
            </div>
        </div>

        <!-- 5. 第四组导航（绿色） -->
        <div class="nav-group" style="background-color: #4CAF50;">
            <div class="nav-left" style="background-color: #4CAF50;">
                <!-- 左侧填充绿色 -->
            </div>
            <div class="nav-right">
                <div class="nav-item">海外酒店</div>
                <div class="nav-item">团购</div>
                <div class="nav-item">特惠酒店</div>
                <div class="nav-item">客栈公寓</div>
            </div>
        </div>

        <!-- 6. 中间功能：签到 + 特卖汇（图片路径需正确） -->
        <div class="middle-func">
            <div class="func-card">
                <img src="../img/积分.png" alt="签到领积分">
                <div class="text">
                    <h3>签到领积分</h3>
                    <p>天天有礼 积分不止</p>
                </div>
            </div>
            <div class="func-card">
                <img src="../img/特卖汇.png" alt="特卖汇">
                <div class="text">
                    <h3>特卖汇</h3>
                    <p>限时抢购、超值预售</p>
                </div>
            </div>
        </div>

        <!-- 7. 底部功能区（图标路径需替换为实际文件） -->
        <div class="footer-func">
            <div class="footer-func-item">
                <div class="footer-func-icon" style="background-image: url('../img/电话预订.png');"></div>
                <div class="footer-func-text">电话预订</div>
            </div>
            <div class="footer-func-item">
                <div class="footer-func-icon" style="background-image: url('../img/下载客户端.png');"></div>
                <div class="footer-func-text">下载客户端</div>
            </div>
            <div class="footer-func-item">
                <div class="footer-func-icon" style="background-image: url('../img/我的.png');"></div>
                <div class="footer-func-text">我的</div>
            </div>
        </div>

        <!-- 8. 页脚信息 -->
        <div class="footer-info">
            <a href="#">网站地图</a>|
            <a href="#">ENGLISH</a>|
            <a href="#">电脑版</a>
            <p>©2015 携程旅行</p>
        </div>
    </div>
</body>
</html>